<template>
	<view class="cs-main">
		<!-- 搜索框 -->
		<view class="cs-search">
			<view class="cs-search-x">
				<view class="cs-search-back" @click="back">
					<text class="iconfont iconfanhui-copy icon_fanhui"></text>
				</view>
				<view class="cs-search-input">
					<input 
					@confirm='search'
					v-model="search_text"
					type="text" 
					confirm-type='search'
					placeholder="请输入关键字" 
					placeholder-style="color:#CCCCCC;font-size:26upx;"/>
					<text v-show="search_text.length > 0" class="iconfont iconjujue icon_guanbi" @click="clearText"></text>
				</view>
				<view class="cs-search-btn" @click="search">
					<text>搜索</text>
				</view>
			</view>
		</view>
		
		<!-- 搜索列表 -->
		<v-search-list v-if='!showTabs' :search_list='searchList' @on_showUser='on_showUser'></v-search-list>
		
		<!-- 列表对应-搜索选项卡 -->
		<v-user-tabs v-if='showTabs' @changeTabs='changeTabs'></v-user-tabs>
		
		<!-- 选项卡-视频 -->
		<v-user-video v-if='changeIndex === 0 && showTabs && searchList.length > 0' :video_list='videoList' 
		@videoLike='videoLike'
		@linkVideoDetail='linkVideoDetail'
		></v-user-video>
		
		<!-- 选项卡-用户 -->
		<v-user-user v-if='changeIndex === 1 && showTabs && searchList.length > 0' :search_list='searchList' :search_name='search_text' @changeWatch='changeWatch'></v-user-user>
		
		<!-- 选项卡-文章 -->
		<v-user-article v-if='changeIndex === 2 && showTabs && searchList.length > 0' :articleList='articleList'></v-user-article>
		
		<!-- 历史记录 -->
		<v-history v-if="search_text.length <= 0" @on_showHistoryUser='on_showHistoryUser'></v-history>
		
	</view>
</template>

<script>
	import utils from '@/common/util.js'
	import search_list from './components/search-list'
	import user_tabs from './components/search-user_tabs'
	import user_video from './components/search-user_video'
	import user_user from './components/search-user_user'
	import user_article from './components/search-user_article'
	import history from './components/history'
	export default {
		components: {
			vSearchList: search_list,
			vUserTabs: user_tabs,
			vUserVideo: user_video,
			vUserUser: user_user,
			vUserArticle: user_article,
			vHistory: history
		},
		data() {
			return {
				changeIndex: 0, // 0显示视频 1显示用户 2显示文章
				search_text: '', // 搜索框内容
				searchList: [], // 搜索列表
				articleList: [], // 文章列表
				videoList: [], // 视频列表
				showTabs: false, // 显隐选项卡
				now: Date.now(), // 当前时间
			}
		},
		onLoad() {
			// 为用户增加一个搜索历史记录缓存Key
			if (!uni.getStorageSync('searchCache')) {
				uni.setStorage({
					key: 'searchCache',
					data: []
				})
			}
		},
		methods: {
			// 返回
			back() {
				uni.navigateBack()
			},
			
			// 搜索
			search() {
				let _this = this
				this.showTabs = false // 每次搜索时，重新隐藏tabs选项卡。
				this.changeIndex = 0 // 每次搜索时，将tabs选项卡索引值为0。（默认第一项）
				if (this.search_text.length <= 0) {
					return this.showTotast('内容不能为空哦~', 'none')
				}
				
				// 每次搜索将搜索名称缓存到本地，以便拿到历史记录
				uni.getStorage({ // 首先获取之前的缓存历史数据，在进行累加现在的历史新数据
					key: 'searchCache',
					success: function(res) {
						let searchData = res.data
						for (let v of searchData) { // 确保新增的内容不会与原来的重复,如果重复则不会进行下一步的操作
							if (v === _this.search_text) return false
						}
						searchData.unshift(_this.search_text)
						
						// 开始设置
						uni.setStorage({
							key: 'searchCache',
							data: searchData
						})
					}
				})
				
				
				let temp_now = Date.now()
				if (temp_now - this.now >= 1500) { // 防止用户一直重复点击搜索
					// 开始搜索用户数据[http://192.168.1.115:81/index.php/user/video.User/SearchUser]
					this.getData_api('/user/video.User/SearchUser', {search_name: this.search_text}, 'SearchUser')
					this.now = Date.now()
				}
			},
			// 清空搜索内容
			clearText() {
				this.search_text = ''
				this.searchList = [] // 清空搜索列表，避免显示了历史记录又显示了搜索列表
				this.showTabs = false // 清空时把tabs选项卡也清空
				this.changeIndex = 0
			},
			
			// 点击搜索列表某个名称进去
			on_showUser(index) {
				// 点击后进行显示用户的tabs
				this.showTabs = true
				// 获取当前点击的名称，更新搜索框的值，然后重新请求对应tabs选项卡数据
				this.search_text = this.searchList[index].nicheng
				this.searchList = [] // 每次点击某个名称时都要将原来的搜索列表清空，避免下次搜索的与上一次冲突
				this.articleList = [] // 每次点击某个名称时都要将原来的文章列表清空，避免下次搜索的与上一次冲突
				// 获取视频
				this.getData_api('/user/video.Lists/VideoList', {title: this.search_text}, 'VideoList')
				// 获取用户
				this.getData_api('/user/video.User/SearchUser', {search_name: this.search_text}, 'SearchUser')
				// 获取文章
				this.getData_api('/user/article.Lists/articleList', {title: this.search_text,}, 'articleList')
			},
			// 点击历史搜索列表的某个名称进去
			on_showHistoryUser(history_name){
				// 点击后进行显示用户的tabs
				this.showTabs = true
				// 获取当前点击的名称，更新搜索框的值，然后重新请求对应tabs选项卡数据
				this.search_text = history_name
				this.searchList = [] // 每次点击某个名称时都要将原来的搜索列表清空，避免下次搜索的与上一次冲突
				this.articleList = [] // 每次点击某个名称时都要将原来的文章列表清空，避免下次搜索的与上一次冲突
				// 获取视频
				this.getData_api('/user/video.Lists/VideoList', {title: this.search_text}, 'VideoList')
				// 获取用户
				this.getData_api('/user/video.User/SearchUser', {search_name: this.search_text}, 'SearchUser')
				// 获取文章
				this.getData_api('/user/article.Lists/articleList', {title: this.search_text,}, 'articleList')
			},
			
			// 选项卡的切换
			changeTabs(changeIndex) {
				this.changeIndex = changeIndex
				uni.setStorageSync('search_tab_index',  changeIndex) // 缓存选项卡，以便保留历史记录
			},
			// 关注/取消关注
			changeWatch(index) {
				let title = this.searchList[index].is_follow == 0 ? '关注成功' : '已取消'
				this.searchList[index].is_follow = this.searchList[index].is_follow == 0 ? 1 : 0
				this.showTotast(title, 1)
			},
			
			// 封装请求获取数据
			// url: 请求接口
			// q_obj: 请求所需参数
			// type: 数据类型，根据不同类型，来存储不同数据
			getData_api(url, q_obj, type) {
				this.showLoading('获取中...')
				this.$zapi.apiPost(url, q_obj).then(res => {
					uni.hideLoading()
					// 无数据的处理
					if (res.data.code == 400) {
						switch (type){
							case 'SearchUser':
								this.searchList = [] // 没有数据则应该清空原来的
								return this.showTotast('已无更多数据~', 'none')
							break;
							case 'articleList':
								return this.articleList = [] // 没有数据则需要清空原来的文章数据，避免下次重复显示
							break;
							case 'VideoList':
								return this.videoList = [] // 没有数据则需要清空原来的文章数据，避免下次重复显示
							break;
						}
					}
					// 有数据的处理
					if (res.data.code == 200) {
						switch (type){
							case 'SearchUser':
								this.searchList = res.data.data
							break;
							case 'articleList':
								this.articleList = res.data.data.data
								// 给图片设置宽度。否则会撑满屏幕, 以及格式化时间戳
								this.articleList.forEach((item,index) => {
									this.articleList[index].content = item.content.replace(/<img/g, '<img style="max-width: 100%;"')
									this.articleList[index].creat_time = utils.getBriefTime(this.articleList[index].creat_time)
								})
							break;
							case 'VideoList':
								this.videoList = res.data.data.data
							break;
						}
					}
				}).catch(err => {
					this.searchList = []
					this.articleList = []
					uni.hideLoading()
				})
			},
			
			// 视频喜欢/不喜欢
			videoLike(index) {
				this.videoList[index].is_like= this.videoList[index].is_like == 2 ? 1 : 2 // 区分当前有没有点击喜欢过然后进行请求
				this.$zapi.apiPost('user/video.Lists/isLike', {
					video_id: this.videoList[index].video_id, // 视频ID
					is_like: this.videoList[index].is_like // 赞状态
				}).then(res => {
					if (res.data.code == 200) {
						if (this.videoList[index].is_like == 2) {
							this.videoList[index].likenum++
						} else {
							this.videoList[index].likenum--
						}
					}
				})
			},
			
			// 跳转视屏详情
			linkVideoDetail(index) {
				// 1. 需要区分当前点击是第几条，来计算要传入对应的页数带过去,同时需要将index进行向上取整，并且以7条为单位
				// 2. 然后将当前这条视频ID也带过去
				// 3. 并且type为1带过去，该type用来区分是哪种视频列表
				let page = Math.ceil(index / 7)
				let video_id = this.videoList[index].video_id
				let type = 1
				uni.navigateTo({
					url: `../videoDetail?page=${page}&video_id=${video_id}&type=${type}`
				})
			},
			// 封装加载动画
			showLoading(title) {
				uni.showLoading({
					title: title
				})
			},
			// 封装吐司
			showTotast(title, icon) {
				uni.showToast({
					title: title,
					icon: icon
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}
	.cs-main{
		overflow-y: auto;
	}
	
	// 搜索样式
	.cs-search{
		position: fixed;
		left: 0;right: 0;
		padding-top: 44upx;
		z-index: 1;
		background: #FF9900;
	}
	.cs-search-x{
		display: flex;
		padding: 14upx 30upx;
		justify-content: space-between;
		align-items:center;
	}
	.cs-search-input{
		position: relative;
		flex: 0.9;
		padding:8upx 20upx;
		padding-right: 56upx;
		border-radius: 8upx;
		background: #FFFFFF;
	}
	.cs-search-btn{
		color: #FFFFFF;
	}
	// 图标
	.icon_fanhui{
		color: #FFFFFF;
	}
	.icon_guanbi{
		position: absolute;
		margin-right: 12upx;
		right: 0;top: 0;
		font-size: 36upx;
		color: #999999;
	}
</style>
